<template>
  <div class="container">
    <mt-header fixed title="欢迎登陆">
      <span slot="left" @click="goback">
        <mt-button>
          <img src="../assets/fh.png" alt="后退">
        </mt-button>
      </span>
    </mt-header>
    <form class="login_form">
      <ul>
        <li>
          <label>账号：</label>
          <input
            type="text"
            placeholder="请输入账号"
            v-model="user_name"
            :class="{border:colorIs}"
            @keyup="account"
          >
        </li>
        <li class="tips">{{tips.tip1}}</li>
        <li>
          <label>密码：</label>
          <input
            type="password"
            placeholder="请输入密码"
            v-model="passwd"
            :class="{border:colorIs2}"
            @keyup="paswd"
          >
        </li>
        <li class="tips">{{tips.tip2}}</li>
      </ul>
      <div class="bt">
        <button type="button" class="mui-btn mui-btn-primary" @click="login">登陆</button>
      </div>
    </form>
  </div>
</template>
<script>
import { Toast } from "mint-ui";

export default {
  data() {
    return {
      user_name: "",
      passwd: "",
      tips: {
        //提示信息
        tip1: "",
        tip2: ""
      },
      colorIs: false,
      colorIs2: false
    };
  },
  methods: {
    goback() {
      // 点击后退
      this.$router.go(-1);
    },
    account() {
      //账号验证
      this.tips.tip1 = "";
      var gz = /^[0-9a-z]{6,}|_[0-9a-z]{6,}$/i;
      if (!this.user_name) {
        this.tips.tip1 = "*用户名不能为空*";
        this.colorIs = true;
      } else if (!gz.test(this.user_name)) {
        this.tips.tip1 = "*用户名必须是6位以上的数字字母下划线*";
        this.colorIs = true;
      } else {
        this.colorIs = false;
      }
    },
    paswd() {
      //密码验证
      this.tips.tip2 = "";
      var gz = /^[a-zA-Z0-9]{6,12}$/;
      if (!this.passwd) {
        this.tips.tip2 = "*密码不能为空*";
        this.colorIs2 = true;
      } else if (!gz.test(this.passwd)) {
        this.tips.tip2 = "*密码最少是6位最多12位数字或字母*";
        this.colorIs2 = true;
      } else {
        this.colorIs2 = false;
      }
    },
    login() {
      //点击登陆
      //账号验证
      var gz = /^[0-9a-z]{5,}|_[0-9a-z]{5,}$/i;
      if (!this.user_name) {
        this.tips.tip1 = "*用户名不能为空*";
        this.colorIs = true;
        Toast({
          message: "账号不能空",
          iconClass: "mui-icon mui-icon-info-filled"
        });
        return;
      } else if (!gz.test(this.user_name)) {
        this.tips.tip1 = "*用户名必须是6位以上的数字字母下划线*";
        this.colorIs = true;
        Toast({
          message: "用户名必须是6位以上的数字字母下划线",
          iconClass: "mui-icon mui-icon-info-filled"
        });
        return;
      } else {
        this.colorIs = false;
      }
      //密码验证
      var gz = /^[a-zA-Z0-9]{6,12}$/;
      if (!this.passwd) {
        this.tips.tip2 = "*密码不能为空*";
        this.colorIs2 = true;
        Toast({
          message: "密码不能为空",
          iconClass: "mui-icon mui-icon-info-filled"
        });
        return;
      } else if (!gz.test(this.passwd)) {
        this.tips.tip2 = "*密码最少是6位最多12位数字或字母*";
        this.colorIs2 = true;
        Toast({
          message: "密码最少是6位最多12位数字或字母",
          iconClass: "mui-icon mui-icon-info-filled"
        });
        return;
      } else {
        this.colorIs2 = false;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.container{
  padding-top: 0.6rem;
}
ul li {
  list-style: none;
}
.login_form {
  padding-top: 0.2rem;
  ul {
    padding: 0;
    margin: 0;
    margin-bottom: 0.2rem;
    li {
      padding: 0.1rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      label {
        width: 20%;
        text-align: left;
      }
      input {
        width: 80%;
        color: #333;
        margin-bottom: 0;
        border: 1px solid #ccc;
      }
    }
    .tips {
      display: block;
      margin: 0;
      padding: 0 0.1rem;
      padding-left: 20%;
      text-indent: 0.1rem;
      text-align: left;
      font-size: 0.14rem;
      color: #f00;
    }
    .border {
      border: 1px solid #f00;
    }
  }
  .bt {
    padding: 0.2rem 0;
    .mui-btn {
      width: 80%;
      height: 0.4rem;
      margin: 0 auto;
    }
  }
}
</style>